<template>
	<view class="goodsDetail">
		<u-navbar title=" " bgColor="transparent" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#333333"></uni-icons></view>
			<view slot="center" style="color:#333333">
				产品详情
			</view>
		</u-navbar>
		<view class="swiperBox">
			<u-swiper imgMode="aspectFill" height="544rpx" :list="detailInfo.imgs" :radius="0" :circular="true">
			</u-swiper>
		</view>
		<view class="goodsCon">
			<view class="price-name">
				<view class="top flex_heng">
					<view class="price">
						<b>￥</b>
						<span>{{detailInfo.price}}</span>
						<text>实时价格</text>
					</view>
					<view class="stcok">
						库存：{{detailInfo.totalStock}}
					</view>
				</view>
				<h2 class="u-line-2">{{detailInfo.title}}</h2>
			</view>

			<!--  @tap="skuSelect()" -->
			<view class="goodsSku flex_heng">
				<view class="skuLeft flex_heng">
					<view class="skuTitle">
						规格：
					</view>
					<view class="skuCon u-line-1">
						{{skuNameObj.skuOneName}}:{{skuName}}/{{skuNameObj.skuTwoName}}:{{skuNameTwo}}
					</view>
				</view>
				<!-- <view class="skuRight">
					<uni-icons type="right" size="16" color="#666666"></uni-icons>
				</view> -->
			</view>

			<u-line color="#DEDEDE"></u-line>

			<view class="describeBox">
				<view class="describeTitle">
					描述：
				</view>
				<u-read-more :toggle="true" showHeight="40" ref="uReadMore" :shadowStyle="shadowStyle" textIndent="3em"
					closeText="展开">
					<rich-text :nodes="detailInfo.describe" @load="load"></rich-text>
				</u-read-more>
			</view>
			<u-line color="#DEDEDE" margin="26rpx 0"></u-line>

			<view class="goodsAlbumPics">
				<image v-for="(item,index) in detailInfo.detail" :key="index" :src="item" mode="widthFix" class="shopImageBox">
				</image>
			</view>

			<view class="comment">
				<view class="commentTitle">
					<text>用户评价</text><text class="num">{{total}}</text>
				</view>
				<view class="commentList">
					<view class="itemComment flex_heng" v-for="(item,index) in commentList" :key="index">
						<view :class="item.img?'leftBox':'leftBoxTwo'">
							<view class="lefttop flex_heng">
								<view class="flex_heng">
									<view class="avatar">
										<!-- <u-avatar :src="item.userAvatar" shape="circle" size="20"></u-avatar> -->
										<u-avatar :src="item.avatar" shape="circle" size="28"></u-avatar>
									</view>
									<view class="nickName">
										<!-- {{item.userNickName}} -->
										{{item.nickName}}
									</view>
								</view>
								<view class="sku">
									<!-- 规格：{{item.spData[0].k}}:{{item.spData[0].v}},{{item.spData[1].k}}:{{item.spData[1].v}} -->
									{{item.createTime}}
								</view>
							</view>
							<view class="leftcontent">
								<!-- {{item.message}} -->
								{{item.commentMessage}}
							</view>
						</view>
						<view class="rightBox" v-if="item.img">
							<image :src="imgUrl + item.img" mode="" class="commentimg"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="btns flex_heng">
				<view class="btnsleft flex_heng">
					<view class="cartBox flex_shu">
						<u-badge max="99" :value="cartValue" :absolute="true" :offset="[0,0]"></u-badge>
						<u-icon name="shopping-cart" size="26" color="#333" @tap="goshopCart()"></u-icon>
						<text>购物车</text>
					</view>
					<view class="cartBox flex_shu">
						<u-icon v-if="!detailInfo.isCollection" name="heart" size="26" color="#333"
							@tap="isCollectionTap()"></u-icon>
						<u-icon name="heart-fill" v-if="detailInfo.isCollection" size="26" color="#FF8F1F"
							@tap="isCollectionTap()"></u-icon>
						<text>收藏</text>
					</view>
				</view>
				<view class="btnsright">
					<p class="join" @tap="addCart()">加入购物车</p>
					<p class="buy" @tap="buyNow()">立即购买</p>
				</view>
			</view>

		</view>

		<!-- 		<wu-sku v-model="skuShow" :data="skus" :themeColor="[226, 35, 26]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			btnConfirmText="购买" notSelectSku="请选择完整的商品信息" @skuChange="skuChange" @confirm="skuConfirm"></wu-sku> -->
		<!-- 商品规格弹窗 -->
		<u-popup :round="10" :closeOnClickOverlay="false" :show="skuShow" :closeable="true" @close="skuShowClose">
			<view class="specification-popup">
				<view class="one">
					<view class="shopCard flex_heng">
						<view class="cardImg">
							<image :src="popupShopInfo.pic" mode="" class="goodImg"></image>
						</view>
						<view class="cardRight flex_shu">
							<view class="shopName">
								{{detailInfo.title}}
							</view>
							<view class="shopPrice flex_heng">
								<view class="priceSku flex_heng">
									<view class="prcie">
										<text>￥</text><text class="money">{{ totalPrice }}</text>
									</view>
									<view class="cardsku">
										<!-- 商品规格 -->
									</view>
								</view>
								<view class="numberBox">
									<u-number-box integer buttonSize="22" color="#111111" bgColor="#F5F5F5" inputWidth="22" :min="1"
										:max="9999" v-model="goodsCount"></u-number-box>
								</view>
							</view>
						</view>
					</view>

					<view class="skuBox">
						<view class="itemskuBox">
							<view class="itemtypename">
								{{skuNameObj.skuOneName}}
							</view>
							<view class="itemlistBox flex_heng">
								<view class="flex_heng" :class="skuName == item.skuOneValue?'listBoxTwo':'listBox'"
									v-for="(item,index) in AllskuList[0]" :key="index" @click="skuClick(item,index)">
									<view class="listBoxImg">
										<image :src="item.img" mode="" class="skuImg"></image>
									</view>
									<view class="listBoxName">
										{{item.skuOneValue}}
									</view>
								</view>
							</view>
						</view>

						<view class="itemskuBox">
							<view class="itemtypename">
								{{skuNameObj.skuTwoName}}
							</view>
							<view class="itemlistBox flex_heng">
								<view class="flex_heng" :class="skuNameTwo == item.skuTwoValue?'listBoxTwo':'listBox'"
									v-for="(item,index) in skuTwoList" :key="index" @click="skuClickTwo(item,index)">
									<view class="listBoxName">
										{{item.skuTwoValue}}
									</view>
									<view class="listBoxPrice" v-if="item.price">
										￥{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="buttonbox">
						<u-button v-if="addType==1" @click="joinCart" shape="circle" type="primary" :plain="true"
							text="加入购物车"></u-button>
						<u-button v-else @click="skuSubmit()" shape="circle" type="primary" text="确 认"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		joinInCart,
		getProductInfo,
		getCartNum,
		collectProduct,
		getCommentList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				commentList: [
					// userAvatar:'',
					{},
					{},
					{}
				],
				// 是否显示组件
				skuShow: false,
				// sku列表
				cartValue: 0,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				detailInfo: {},

				goodsCount: 1,
				// 弹框商品信息
				popupShopInfo: {},

				AllskuList: [],
				skuNameObj: {},
				skuTwoList: [],

				skuName: '',
				skuNameTwo: '',
				addType: 0,
				pageNum: 1,
				total: 0,
			};
		},
		onLoad(op) {
			console.log(op);
			if (op.goodsId) {
				this.goodsId = op.goodsId
				this.getDetail()
			}
		},
		onShow() {
			this.getCartListData()
			this.pageNum = 1;
			this.commentList = [];
			this.getCommentList()
		},
		onReachBottom() {
			this.pageNum += 1;
			this.getCommentList()
		},
		computed: {
			totalPrice() {
				return this.popupShopInfo.price * this.goodsCount
			}
		},
		methods: {
			buyNow() {
				console.log('立即购买', this.popupShopInfo, this.goodsCount)
				let orderInfo = [{
					shopName: this.detailInfo.shopName,
					totalPrice: this.totalPrice,
					goodsInfo: [{
						skuId: this.popupShopInfo.id,
						goodsName: this.detailInfo.title,
						img: this.popupShopInfo.pic,
						sku: `${this.skuNameObj.skuOneName}:${this.skuName}/${this.skuNameObj.skuTwoName}:${this.skuNameTwo}`,
						price: this.popupShopInfo.price,
						num: this.goodsCount
					}]
				}]
				uni.setStorageSync('orderInfo', orderInfo);
				uni.navigateTo({
					url: '/pages/package/orderDetail/orderDetail'
				})
			},

			//购物车
			getCartListData() {
				getCartNum().then(res => {
					console.log('购物车===>', res)
					this.cartValue = res.data;
				})
			},
			skuShowClose() {
				this.skuShow = false
			},

			//获取商品详情
			getDetail() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				getProductInfo(this.goodsId).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.detailInfo = res.data;
						this.detailInfo.imgs = res.data.albumPics.split(",");
						this.AllskuList = JSON.parse(res.data.data)
						this.skuNameObj = JSON.parse(res.data.data1)
						this.detailInfo.detail = res.data.detail.split(',');
						this.skuName = this.AllskuList ? this.AllskuList[0][0].skuOneValue : ''
						this.skuTwoListChange(this.skuName)
						console.log('商品详情===>', this.detailInfo)
					}
				})
			},

			//添加购物车
			addCart() {
				this.addType = 1
				this.skuName = this.AllskuList ? this.AllskuList[0][0].skuOneValue : ''
				this.skuTwoListChange(this.skuName)
				this.skuShow = true
			},

			//加入购物车
			joinCart() {
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				const params = {
					num: this.goodsCount,
					skuId: this.popupShopInfo.id,
					productId: this.popupShopInfo.productId,
				}
				joinInCart(params).then(res => {
					console.log('res', res);
					uni.$u.toast('添加购物车成功');
					this.skuShow = false;
					uni.hideLoading();
					this.getCartListData();
				})
			},


			//规格一点击
			skuClick(skuItems, skuIndex) {
				this.skuName = skuItems.skuOneValue;
				this.skuTwoListChange(this.skuName);
			},

			// 规格二变化
			skuTwoListChange(skuOneName) {
				const newSkulist = this.detailInfo.skuList.filter(item => item.skuOneValue == this.skuName);
				this.skuTwoList = newSkulist;
				this.skuNameTwo = newSkulist[0].skuTwoValue;
				this.skuClickTwo(newSkulist[0], 0);
			},

			//规格二点击
			skuClickTwo(skuItems, skuIndex) {
				this.skuNameTwo = skuItems.skuTwoValue;
				// this.skuTwoList
				this.popupShopInfo = skuItems;
				console.log('this.popupShopInfo ', this.popupShopInfo)
			},

			//跳转购物车
			goshopCart() {
				uni.navigateTo({
					url: `/pages/package/shoppingCart/shoppingCart`
				})
			},



			skuSelect() {
				this.addType = 0;
				// this.skuName = this.AllskuList ? this.AllskuList[0][0].skuOneValue : '';
				// this.skuTwoListChange(this.skuName);
				this.skuShow = true;
			},
			skuSubmit() {

				this.skuShow = false;
			},


			isCollectionTap() {
				collectProduct(this.detailInfo.id).then(res => {
					this.detailInfo.isCollection = true;
				})
			},

			getCommentList() {
				getCommentList({
						productId: this.goodsId,
						pageNum: this.pageNum,
						pageSize: 10
					})
					.then(res => {
						if (res.rows.length > 0) {
							this.commentList = [
								...this.commentList,
								...res.rows
							];
						}
						this.total = res.total;
					})
			},
		}
	}
</script>

<style lang="scss">
	.goodsDetail {
		width: 100%;
		padding: 0 0 180rpx;
		box-sizing: border-box;
		background: #F6F6F6;

		.swiperBox {
			width: 100%;

			.u-swiper {
				width: 100%;
			}
		}

		.goodsCon {
			width: 100%;
			padding: 28rpx;
			box-sizing: border-box;

			.price-name {
				width: 100%;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						display: flex;
						align-items: center;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0.78rpx;
						font-weight: 700;
						vertical-align: bottom;

						b {
							color: #ff0202;
							text-align: left;
							font-size: 32rpx;
						}

						span {
							color: #ff0202;
							font-size: 52rpx;
						}

						text {
							color: #9e9e9e;
							font-size: 24rpx;
							font-weight: 400;
						}
					}

					.stcok {
						color: #333333;
						font-size: 28rpx;
						font-weight: 400;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0.42rpx;
					}

				}

				h2 {
					color: #000000;
					text-align: left;
					font-size: 32rpx;
					font-weight: 400;
					font-family: "Alibaba PuHuiTi 2.0";
					letter-spacing: 0.48rpx;
				}
			}

			.goodsSku {
				width: 100%;
				height: 72rpx;
				margin-top: 48rpx;

				.skuLeft {
					color: #000000;
					font-size: 28rpx;
					font-weight: 400;
					font-family: "Alibaba PuHuiTi 2.0";
					letter-spacing: 0.42rpx;

					.skuTitle {
						width: 106rpx;
						color: #666666;
					}
				}

				.skuRight {}
			}

			.describeBox {
				width: 100%;
				margin-top: 26rpx;
				position: relative;

				.describeTitle {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 28rpx;
					color: #666666;
					font-weight: 400;
					font-family: "Alibaba PuHuiTi 2.0";
					letter-spacing: 0.42rpx;
				}
			}

			.goodsAlbumPics {
				margin-top: 20rpx;
				width: 100%;
				border-radius: 4rpx;

				.shopImageBox {
					width: 100%;
					border-radius: 16rpx;
				}

			}

			.comment {
				margin-top: 20rpx;
				border-radius: 36rpx;
				opacity: 1;
				background: #ffffff;
				padding: 28rpx;
				box-sizing: border-box;

				.commentTitle {
					color: #000000;
					font-size: 32rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";

					.num {
						color: #666666;
						font-size: 28rpx;
					}
				}

				.commentList {
					width: 100%;
					margin-top: 10rpx;

					.itemComment {
						// height: 112rpx;
						width: 100%;
						margin-top: 40rpx;
						// overflow: hidden;

						.leftBox {
							// min-width: 522rpx;
							height: 100%;
							width: 522rpx;

							.lefttop {
								width: 100%;
								height: 40rpx;
								font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
								font-weight: 300;
								font-size: 20rpx;
								color: #999999;

								.nickName {
									margin-left: 12rpx;
									color: #000;
								}

								.sku {
									margin-left: 20rpx;
									float: right;
								}
							}

							.leftcontent {
								margin-top: 20rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.leftBoxTwo {
							height: 100%;
							width: 100%;

							.lefttop {
								width: 100%;
								height: 40rpx;
								font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
								font-weight: 300;
								font-size: 20rpx;
								color: #999999;

								.nickName {
									margin-left: 12rpx;
								}

								.sku {
									margin-left: 20rpx;
								}
							}

							.leftcontent {
								margin-top: 20rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
							}

						}

						.rightBox {
							width: 100rpx;
							height: 112rpx;

							.commentimg {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

			}

			.btns {
				width: 100%;
				position: fixed;
				bottom: 0rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: #fff;
				padding: 23rpx;
				box-sizing: border-box;

				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				.btnsleft {

					.cartBox {
						position: relative;
						width: 108rpx;
						height: 80rpx;
						color: #000000;
						font-size: 24rpx;
						font-weight: 400;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0.36rpx;
					}
				}


				.btnsright {
					display: flex;
					align-items: center;

					p {
						font-size: 28rpx;
						font-weight: 400;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0.42rpx;
						line-height: 84rpx;
						text-align: center;
					}

					.join {
						width: 198rpx;
						height: 84rpx;
						border-radius: 116rpx 0 0 116rpx;
						border: 2rpx solid #FF483C;
						background: #ffffff;
						color: #FF483C;
					}

					.buy {
						color: #ffffff;
						width: 202rpx;
						height: 88rpx;
						border-radius: 0 116rpx 116rpx 0;
						background: #FF483C;
					}
				}
			}
		}

		.specification-popup {
			width: 100%;

			.one {
				width: 100%;
				padding: 0 0rpx 20rpx;
				box-sizing: border-box;

				.shopCard {
					width: 100%;
					height: 160rpx;
					background: #FFFFFF;

					.cardImg {
						width: 160rpx;
						height: 160rpx;

						.goodImg {
							width: 160rpx;
							height: 160rpx;
						}
					}

					.cardRight {
						width: calc(100% - 160rpx);
						height: 160rpx;
						margin-left: 28rpx;

						.shopName {
							width: 100%;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #111111;
							color: #666666;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.shopPrice {
							width: 100%;

							.priceSku {
								align-items: flex-end;

								.prcie {
									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #111111;

									.money {
										font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
										font-weight: 500;
										font-size: 48rpx;
										color: #111111;
										margin-left: 6rpx;
									}
								}

								.cardsku {
									margin-left: 12rpx;
									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
									font-weight: 300;
									font-size: 24rpx;
									color: #888888;
								}
							}

							.numberBox {
								.u-number-box__minus {
									width: 22px !important;
								}

								.u-number-box__plus {
									width: 22px !important;
								}
							}
						}
					}
				}

				.skuBox {
					width: 100%;
					min-height: 500rpx;
					background: #F5F9FF;

					.itemskuBox {
						width: 100%;
						padding: 20rpx 32rpx;
						box-sizing: border-box;

						.itemtypename {
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #666666;
						}

						.itemlistBox {
							width: 100%;
							flex-wrap: wrap;
							padding-top: 20rpx;
							justify-content: flex-start;

							.listBox {
								min-width: 200rpx;
								padding: 0 20rpx 0 0;
								box-sizing: border-box;
								height: 60rpx;
								background: #FFFFFF;
								border-radius: 8rpx;
								justify-content: flex-start;
								margin-bottom: 20rpx;
								overflow: hidden;
								margin-right: 20rpx;

								.listBoxImg {
									width: 60rpx;
									height: 60rpx;
									background: #FFFFFF;

									.skuImg {
										width: 60rpx;
										height: 60rpx;
									}
								}

								.listBoxName {
									margin-left: 20rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #111111;
								}

								.listBoxPrice {
									margin-left: 20rpx;
									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #111111;
								}
							}

							.listBoxTwo {
								min-width: 198rpx;
								padding: 0 20rpx 0 0;
								box-sizing: border-box;
								height: 60rpx;
								background: #FFFFFF;
								border-radius: 8rpx;
								justify-content: flex-start;
								margin-bottom: 20rpx;
								overflow: hidden;
								border: 1rpx solid #00bf39;
								margin-right: 20rpx;

								.listBoxImg {
									width: 60rpx;
									height: 60rpx;
									background: #FFFFFF;

									.skuImg {
										width: 60rpx;
										height: 60rpx;
									}
								}

								.listBoxName {
									margin-left: 20rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #111111;
								}

								.listBoxPrice {
									margin-left: 30rpx;
									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #111111;
								}

							}
						}
					}
				}

				.buttonbox {
					width: 100%;
					height: 80rpx;

					.u-button {
						width: 686rpx;
						height: 80rpx;
						background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: none;
						color: #fff;
					}
				}

			}
		}
	}
</style>